<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.nickName" placeholder="微信昵称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="编号" type="index" align="center" width="60"/>
      <el-table-column label="微信昵称" prop="rdd_user.userNickName" align="center"/>
      <el-table-column label="申请人" prop="rdd_user.userName" align="center"/>
      <el-table-column label="手机号" prop="storeContactsPhone" align="center"/>
      <el-table-column label="所在地" prop="storeLocation" align="center"/>
      <!-- <el-table-column :formatter="formatStatus" label="状态" prop="disabled" align="center"/> -->
      <el-table-column label="关联加盟店" align="center">
      	<template slot-scope="scope">
          <span v-if="scope.row.rdd_store">{{ scope.row.rdd_store.storeName}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <el-button v-show="!scope.row.rdd_store" type="primary" size="mini" @click="handelDistribute(scope.row)">关联加盟店</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <el-dialog :visible.sync="dialogFormVisible" title="分配门店" width="50%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="门店" prop="title">
          <el-select filterable v-model="temp.company_id" class="filter-item" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in enterpriseOptions" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

	<script>
		import { fetchUserListAjax } from "@/api/userList";
		import { rddStoreAskList } from '@/api/sign'
		import { fetchShopList } from "@/api/shop";
		import { submitRddStoreAsk } from '@/api/franchise'
		import waves from "@/directive/waves"; // Waves directive
		import { parseTime } from "@/utils";
		import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

		const calendarTypeOptions = [
		{ key: "CN", display_name: "China" },
		{ key: "US", display_name: "USA" },
		{ key: "JP", display_name: "Japan" },
		{ key: "EU", display_name: "Eurozone" }
		];

// arr to obj ,such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
	acc[cur.key] = cur.display_name;
	return acc;
}, {});

export default {
	name: "ComplexTable",
	components: { Pagination },
	directives: { waves },
	filters: {
	},

	data() {
		return {
			tableKey: 0,
			list: [],
			total: 0,
			listLoading: true,
			listQuery: {
				pageNum: 1,
				pageSize: 20
			},
			calendarTypeOptions,
			temp: {},
			rules: {},
			dialogFormVisible: false,
			enterpriseOptions: []
		};
	},
	created() {
		this.getList();
		this.getShopList();
	},
	methods: {
		async getList() {
			this.listLoading = true;
			try {
				const result = await rddStoreAskList(this.listQuery);
				if (result.data.code == 0) {
					this.list = result.data.data.pageData;
					this.total = result.data.data.maxCount;
				}
				this.listLoading = false;
			} catch (err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		async getShopList() {
			const res = await fetchShopList();
			res.data.data.forEach(item => {
				this.enterpriseOptions.push({
					key: item.id,
					value: item.storeName
				});
			});
		},

		handleFilter() {
			this.listQuery.pageNum = 1;
			this.getList();
		},

		formatStatus(row) {
			return row.rdd_store ? '已加盟' : '未加盟';
		},

		handelDistribute(data) {
			debugger;
			this.dialogFormVisible = true;
			this.temp.id = data.id;
		},

		async createData() {
			let req = {
				id: this.temp.id,
				storeId: this.temp.company_id
			}
			const res = await submitRddStoreAsk(req);
			
			if(res.data.code == 0) {
				this.$notify({
					title: "成功",
					message: "分配成功",
					type: "success",
					duration: 2000
				});
			}
			this.getList();
			this.dialogFormVisible = false;
		}
	}
};
</script>
